<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>验证码</title>
</head>
<style>
    img,input {
        vertical-align: middle;
        margin:0 30px;
        border: 1px solid #000;
    }
    span {
        color: red;
        margin-left: 30px;
    }
    #imgVerification img {
    	width: 100px;
    	height: 100px;
    }
    
    #cnVerification img {
    	width: 200px;
    	height: 60px;
    }
</style>
<body>
    <div id="numericVerification">
        <p>数字验证码：
            <img id="numeric_img" src="./numeric.php?r=<?php echo rand();?>" alt="数字验证码">
            <a href="javascript:;" onclick="document.getElementById('numeric_img').src='./numeric.php?r='+Math.random()">看不清？</a>
            <input type="text" placeholder="输入图中验证码">
            <button>验证</button>
            <span></span>
        </p>

    </div>
    <div id="mixedVerification">
        <p>混合验证码：
            <img id="mixed_img" src="./mixed.php?r=<?php echo rand();?>" alt="混合验证码">
            <a href="javascript:;" onclick="document.getElementById('mixed_img').src='./mixed.php?r='+Math.random()">看不清？</a>
            <input type="text" placeholder="输入图中验证码">
            <button>验证</button>
            <span></span>
        </p>
    </div>
    <div id="imgVerification">
        <p>图片验证码：
            <img id="img" src="./img.php?r=<?php echo rand();?>" alt="图片验证码">
            <a href="javascript:;" onclick="document.getElementById('img').src='./img.php?r='+Math.random()">换一个？</a>
            <input type="text" placeholder="输入图中动物名称">
            <button>验证</button>
            <span></span>
        </p>
    </div>
    <div id="cnVerification">
        <p>图片验证码：
            <img id="cn" src="./cn.php?r=<?php echo rand();?>" alt="中文验证码">
            <a href="javascript:;" onclick="document.getElementById('cn').src='./cn.php?r='+Math.random()">换一个？</a>
            <input type="text" placeholder="输入图中文字">
            <button>验证</button>
            <span></span>
        </p>
    </div>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#numericVerification button").click(function () {
                var code = $("#numericVerification input").val();
                authcode('numeric',code);
            });
            $("#mixedVerification button").click(function () {
                var code = $("#mixedVerification input").val();
                authcode('mixed',code);
            });
            $("#imgVerification button").click(function () {
                var code = $("#imgVerification input").val();
                authcode('img',code);
            });
            $("#cnVerification button").click(function () {
                var code = $("#cnVerification input").val();
                authcode('cn',code);
            });
        })
        function authcode(type,code) {
            $.ajax({
                url:'./authcode.php',
                type:'post',
                dataType:"json",
                data:{
                    type:type,
                    code:code
                },
                success:function (data) {
                    $("#"+type+"Verification span").html(data.msg);
                },
                error:function () {
                    
                }
            });
        }
    </script>
</body>

</html>